<template>
	<view class="box">
		<view class="header">
			<input class="search" placeholder="请输入搜索关键字">
		</view>
		
		<swiper class="mainSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class="mainItem" v-for="(data,index) in homeData" v-if = "index >= 0 && index <= 1">
				<view class="swiper-item">
					<image class="mainImg" :src="data.src" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="allbox">
			<view class="top" v-for="(data,index) in homeData" v-if = "index == 2">
				<image class="topimg" :src="data.src"></image>
			</view>
			<view class="down" v-for="(data,index) in homeData" v-if = "index >= 3 && index <= 6">
				<image class="downimg" :src="data.src"></image>
			</view>
		</view>
		
		<view class="allbox">
			<view class="top" v-for="(data,index) in homeData" v-if = "index == 7">
				<image class="topimg" :src="data.src"></image>
			</view>
			<view class="down" v-for="(data,index) in homeData" v-if = "index >= 8 && index <= 11">
				<image class="downimg" :src="data.src"></image>
			</view>
		</view>
		
		<view class="allbox">
			<view class="top" v-for="(data,index) in homeData" v-if = "index == 12">
				<image class="topimg" :src="data.src"></image>
			</view>
			<view class="down" v-for="(data,index) in homeData" v-if = "index >= 13 && index <= 16">
				<image class="downimg" :src="data.src"></image>
			</view>
		</view>
		
        <view style="margin: 20rpx 30rpx; font-size: 40rpx; font-weight: bold;">更多商品</view>
		
		<view class="downbox" style="display: flex; flex-wrap:wrap; width: 90%; margin-left: 5%;">
			<view class="downbox1" v-for="(down,index) in lastData" style="flex : none;width: 50%;">
				<image :src="down.images" style="width: 100%; height: 400rpx;"></image>
				<p style="  display: -webkit-box;
  overflow: hidden;  
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;" >{{down.skuName}}</p>
				<p style="color: red;">{{down.originalPrice}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
		mounted(){
			this.getHomeData(),
			this.getLastData()
		},
		methods:{
			getHomeData(){
				this.$store.dispatch('getHomeData')
			},
			getLastData(){
				this.$store.dispatch('getLastData')
			}
		},
		computed:{
			...mapState({
				homeData:state =>state.home.homeData
			}),
			...mapState({
				lastData:state =>state.home.lastData
			}),
		}
	}
</script>

<style lang="stylus">
	.box
		width :100%
		display :relative
		.header
			height 80rpx
			display flex
			justify-content center
			align-items center
			.search
				width 90%
				height 60rpx
				background-color #e6e6e6
				font-size 28rpx
				line-height 60rpx
				border-radius 30rpx
				padding-left : 40rpx
		.mainSwiper
			width :100%
			height : 500upx
			.mainImg
				width :100%
				height :500upx
		.allbox
			display: flex;
			width :100%
			flex-wrap wrap
			.top
				width :100%
				flex : none
				margin-top : 0
				padding-top :0
				.topimg
					width :100%
					height :300upx
			.down
				width :50%
				flex : none
				.downimg
					width :100%
					height :300upx
</style>